<template>
	<view>
		<view class="top">
			<view>
				<view class="top_bg">
					<image src="@/pages/groupbuy/static/home/tit_bg2.png"></image>
				</view>
				<view class="tit" :class="{'isScroll':isScroll}">
					<view class="t_image">
						<!-- #ifdef MP-WEIXIN -->
						<view class="arror_box" @click="$navBack()">
							<image class="arror" src="@/pages/groupbuy/static/home/r_arror_back.png" ></image>
						</view>
						<!-- #endif -->
						<image class="group_tit" src="@/pages/groupbuy/static/home/group_tit.png" mode="heightFix">
						</image>
					</view>

				</view>
			</view>

		</view>
		<view class="list_box">
			<view class="s_c_head flex_between">
				<view class="flex_box flex_align_end">
					<image src="@/pages/groupbuy/static/home/title.png" mode="heightFix"></image>
					<view class="s_c_tip">如对活动存在疑问，请阅读以下说明</view>
				</view>
			</view>
			<rich-text class="rule_content" :nodes="text"></rich-text>
		</view>
		<!-- 视频按钮 -->
		<groupVideo />
	</view>
</template>

<script>
	import groupVideo from './components/video.vue';
	export default {
		components: {
			groupVideo
		},
		data() {
			return {
				text: '',
				isScroll: false
			};
		},
		onPageScroll(e) {
			this.isScroll = e.scrollTop > 0
		},
		onLoad() {
			this.getInfo();
		},
		methods: {
			getInfo() {
				this.$axios('Group/getPintuanRules', 'POST', 'pintuan').then(res => {
					if (res.data.code == 200) {
						this.text = res.data.data.rules;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fdf8ff;

	}

	.top {
		.top_bg {
			height: 211px;
			width: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.tit {
			position: absolute;
			// height: 85px;
			top: 0;
			left: 0;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			padding: 0 30rpx;
			padding-top: calc(var(--status-bar-height) + 50rpx);

			.t_image {
				display: flex;
				align-items: center;

			}

			.group_tit {
				height: 60rpx;
			}

			.arror_box {
				width: 40rpx;
				height: 34rpx;

				.arror {
					width: 18rpx;
					height: 34rpx;
				}
			}
		}
	}

	.tit.isScroll {
		position: fixed;
		// top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		/* 确保宽度满屏 */
		height: 88px;
		background-color: yellow;
		z-index: 9999;
		/* 提高层级，避免被遮挡 */
		padding: 20rpx 30rpx;
		/* 调整内边距 */
		box-sizing: border-box;
		/* 确保宽度包含内边距 */
		background: linear-gradient(180deg, #9A1FE8 0%, #FFFFFF 100%);
		border-bottom: 2px solid #CCCACD;
	}

	.list_box {
		position: relative;
		top: -40px;
		border-radius: 30rpx 30rpx 0 0;
		background-color: #fdf8ff;
		z-index: 2;
		overflow: hidden;
		padding: 0 20rpx 60rpx;
	}

	.rule_content {
		line-height: 50rpx;
		color: #13001E;
	}

	.s_c_head {
		padding: 30rpx 0;

		.flex_align_end {
			position: relative;
			padding-left: 16rpx;

			image {
				height: 30rpx;
				margin-right: 14rpx;
			}

			&::before {
				content: "";
				width: 4rpx;
				height: 26rpx;
				background: #9A1FE8;
				position: absolute;
				left: 0;
				top: 2rpx;
			}
		}

		.s_c_tip {
			font-size: 22rpx;
			color: #5B5B5B;
		}
	}
</style>